import React, {Component} from 'react';
import Son from "@/NewLifeCycle/Son";
import {produce} from "immer";

class Index extends Component {
  constructor(props) {
    super(props);
    console.log('constructor')
    // 只在组件挂载的时候执行一次
    this.state = {
      msg: '123',
      age: 20,
      info: {
        name: '黑马'
      }
    }
  }

  // willreceiveProps() {} // props发生了变化的时候会触发
  static getDerivedStateFromProps(nextProps, nextState) {
    //  什么时候会触发
    return {
      msg: nextProps.msg // 场景？
    } // 合并
    //
    return null
  }

  componentDidMount() { // mounted
    console.log('dom挂载完成')
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 只在更新的时候执行
    // 首次挂载的时候不会执行
    // console.log('更新完成')
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    // console.log('性能优化')
    return true
  }

  // 父组件更新了
  // 所有嵌套的子组件都会更新
  componentWillUnmount() {
    //  什么情况下
    //  定时器
  }

  changeMsgName = () => {
    // info = {name: '黑马'}
    // 修改了数据，复用了地址
    // this.state.info.name = '传智'
    this.setState(produce(state => {
      state.info.name = '传智'
    }))
    // this.setState({
    //   info: {
    //     ...this.state.info,
    //     name: '传智'
    //   }
    // })
  }

  render() {
    // console.log('render')
    // console.log()
    // set
    return (
      <div>
        {this.state.msg}
        <button onClick={() => this.setState({msg: '234'})}>点击更新msg</button>
        <button onClick={() => this.setState({age: 18})}>更新age</button>
        <button onClick={this.changeMsgName}>更新msg里面的name</button>
        <Son age={this.state.age} info={this.state.info}/>
      </div>
    );
  }
}

export default Index;

// input ==> 默认数据 ==> 接口请求的

//
// class Input extends Component {
//
//   static getDerivedStateFromProps(nextProps, nextState) {
//     // this
//     //  什么时候会触发
//     return {
//       num: nextProps.num // 场景？
//     } // 合并
//     //
//     return null
//   }
//
//   componentDidUpdate(prevProps, prevState, snapshot) {
//     console.log(snapshot);
//   }
//
//   getSnapshotBeforeUpdate(prevProps, prevState) {
//     // 获取更新之前的快照
//     return '2134'
//   }
//
//   // 维护状态 ==> true
//
//   render() {
//     return (
//       <div>
//         <input type="text" defaultValue={this.state.num}/>
//       </div>
//     );
//   }
//
// }

// 生命周期钩子 ==> react15 ==> 16 之后的版本的区别 ==> 什么时候执行的？
// shouldComponentUpdate钩子 ==>
// pureComponent
// React.memo
// 知道 Fiber
